<template>
  <section class="comp-bottom-panel">
    <div class="box-items">
      <div class="box-item"
        v-for="i in player.maxItems" :key="i"
        @click="handleUseItem(player.maxItems - i)">
        <div class="item"
          :class="['item-' + player.items[player.maxItems - i].image]"
          v-if="player.items[player.maxItems - i]"
        ></div>
        <span class="left-time"
          v-if="player.items[player.maxItems - i] && player.items[player.maxItems - i].useTime >= 0">{{ player.items[player.maxItems - i].useTime === 99 ? '∞' : player.items[player.maxItems - i].useTime }}</span>
      </div>
    </div>
    <div class="icon-button"
      @click="handleCower()">
      <img class="icon" src="@/assets/icon_heart.svg" alt="">
    </div>
    <div class="icon-button"
      @click="handleOpenMap()">
      <img class="icon" src="@/assets/icon_map.svg" alt="">
    </div>
  </section>
</template>

<script>
import eventBus from '@/EventBus'
import player from '@/models/Player'
import system from '@/models/system'
import SystemConfig from '@/models/config/System'
import { checkItems } from '@/ctrls/CommonCtrl'

export default {
  data () {
    return {
      player
    }
  },

  mounted () {
    eventBus.$on('notifyMessageAction', ({ action, tag }) => {
      if (action === 'confirm' && tag && tag.source === 'cower') {
        this.dealCower(tag.cowerRecover)
      }
    })
  },

  beforeDestroy () {
    eventBus.$off('notifyMessageAction')
  },

  methods: {
    handleUseItem (index) {
      if (player.items.length && index < player.items.length) {
        const item = player.items[index]
        if (item.key === 'soda') {
          if (item.useTime > 0) {
            if (item.useTime !== 99) {
              item.useTime--
            }
            player.hp += item.addHp
            eventBus.$emit('notifyMessage', {
              message: `使用${item.name}，生命值+${item.addHp}`
            })
          }
          checkItems()
        } else if (item.key === 'gasoline') {
          const chainsawIndex = player.items.findIndex(i => i.key === 'chainsaw')
          if (chainsawIndex >= 0) {
            const chainsawItem = player.items[chainsawIndex]
            if (item.useTime > 0) {
              if (item.useTime !== 99) {
                item.useTime--
              }
              chainsawItem.useTime !== 99 && (chainsawItem.useTime += 2)
              eventBus.$emit('notifyMessage', {
                message: '将汽油灌入链锯，链锯的使用次数增加了'
              })
            }
            checkItems()
          } else {
            eventBus.$emit('notifyMessage', {
              message: item.desc
            })
          }
        } else {
          eventBus.$emit('notifyMessage', {
            message: item.desc
          })
        }
      }
    },
    handleCower () {
      // Cower to recover hp whenever touch Cower icon during idle status. Recover 3 hp, time passes 1 hour and discard the next event withour resolving. Recover may be affected by some items.
      const boneIndex = player.items.findIndex(i => i.key === 'bone')
      let cowerRecover = 3
      boneIndex >= 0 && cowerRecover--
      eventBus.$emit('notifyMessage', {
        message: `你要畏缩到一个隐秘的角落休整一段时间吗？（生命值+${cowerRecover}，时间流逝1小时）`,
        confirmBtnText: '确定',
        cancelBtnText: '取消',
        tag: {
          source: 'cower',
          cowerRecover
        }
      })
    },
    dealCower (recoverHp) {
      player.hp += recoverHp
      eventBus.$emit('notifyMessage', {
        message: `休整结束，生命值+${recoverHp}`
      })
      system.time++
      if (system.time >= SystemConfig.endTime) {
        eventBus.$emit('notifyMessage', {
          message: '午夜12点钟声敲响，游戏结束',
          confirmBtnText: '重新开始',
          tag: {
            source: 'restart'
          }
        })
        // return
      }
      // NOTE I broke the original designed rule, cower only effects time passing, no discarding event here. Reason is it's not that important while brings more complications
    },
    handleOpenMap () {
      eventBus.$emit('notifyShowMap')
    }
  }
}
</script>

<style scoped lang="less">
.comp-bottom-panel {
  display: flex;
  justify-content: space-between;
  align-items: end;
  position: fixed;
  z-index: 31;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 24px;
  // background: red;
  .box-items {
    width: 100px;
    border: 4px solid red;
    border-radius: 8px;
    .box-item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      &:not(:last-of-type) {
        border-bottom: 4px solid red;
      }
      .item {
        width: 100px;
        height: 100px;
        transform: scale(0.8);
      }
      .left-time {
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: #fff;
        font-size: 40px;
        text-shadow: 2px 2px 6px black;
      }
    }
  }
}
</style>
